<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>微商城</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
	<section class="head">
		<h1>商品分类</h1>
		<a class="more" href="javascript:void(0);"><i class="iconfont icon-fenxiang"></i></a>
	</section>
	<section class="banner white e5e5e5 ">
		<div class="swiper-container">
			<div class="swiper-wrapper pb30">
				<div class="swiper-slide">
					<div class="p0">
						<img class="box-shadow" src="images/show.jpg" alt="show" title="show">
					</div>
				</div>
				<div class="swiper-slide">
					<div class="p0">
						<img class="box-shadow" src="images/show.jpg" alt="show" title="show">
					</div>
				</div>
				<div class="swiper-slide">
					<div class="p0">
						<img class="box-shadow" src="images/show.jpg" alt="show" title="show">
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</section>
	<section class="pb20 white">
		<div class="pro-title plr10">
			<div class="info">
				<p class="text-ell2 mb5">无印良品亚麻布料抱枕 三色可选蓝白条纹 黄白条纹 灰白条纹商品型...</p>
				<div class="clearfix">
					<strong>¥299</strong>
					<a class="pull-right mr10" href="javascript:void(0);"><i class="iconfont icon-shoucangkongxin mr5"></i><span>收藏</span></a>
				</div>
			</div>
			<div class="number">
				<p class="text-ell">运费： <span>0.00</span></p>
				<p class="text-ell">库存：<span>1000</span></p>
				<p class="text-ell">销量：<span>366</span></p>
			</div>
		</div>
	</section>
	<section class="white mt5 mb60">
		<div class="plr10 show choice-box" onclick="code.open(this);">
			<a href="javascript:void(0);"><span>请选择商品规格及数量</span><i class="iconfont icon-youjianhao pull-right"></i></a>
		</div>
		<div class="">
			<div class="dis-flex align-c mtb20">
				<div class="shop-logo">
					<img src="images/brand.jpg" alt="店铺logo" title="店铺logo">
				</div>
				<div class="show flex1 shop-info">
					<strong class="text-ell">无印良品中国旗舰店</strong>
					<p class="text-ell">全部宝贝：<span>366</span>件</p>
				</div>
			</div>
			<div class="dis-flex shop-go" >
				<a href="javascript:void(0);">查看全部商品</a><a href="javascript:void(0);">进店逛逛</a>
			</div>  
		<div class="img-title">
			<strong>图文详情</strong>
		</div>
		<div class='img-box'>
			<img src="images/pro1_1.jpg" alt="产品展示">
			<img src="images/pro1_2.jpg" alt="产品展示">
			<p><i></i>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！<a href="javascript:void(0);">进入</a></p>
		</div>
	</section>
	<section class="footr-nav">
		<div class="white">
			<div class="icon-box">
				<i class="iconfont icon-gouwuche"></i><i class="iconfont icon-gerenzhongxin"></i>
			</div>
			<div class="text-box">
				<a href="javascript:void(0);"><span>加入购物车</span></a>
				<a href="javascript:void(0);"><span>立即购买</span></a>
			</div>
		</div>
	</section>
	<section class="mask" onclick="code.close(this)">
		<div class="main-bottom">
			<div class="main-title dis-flex">
				<div class="imgs">
					<img src="images/mask_img.jpg" alt="产品展示" title="产品展示">
				</div>
				<div class="text">
					<p class="text-ell">商品价格：<strong>¥299</strong></p>
					<p class="text-ell">商品库存：<span>100</span></p>
					<p class="text-ell">请选择商品规格</p>
				</div>
			</div>
			<div class="main-info">
				<strong>颜色</strong>
				<div class="dis-flex colors">
					<div class="active"><span>红色</span></div>
					<div><span>蓝色</span></div>
					<div><span>粉红色</span></div>
				</div>
				<div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
					<div>
						<span>170cm*180cm 床单白色 免洗抑菌</span>
					</div>
				</div>
				<div class="main-number dis-flex">
					<div class="flex1">
						<strong>数量</strong>
					</div>
					<div>
						<i>-</i>
						<input type="text" value="0" readonly>
						<i data-number="up">+</i>
					</div>
				</div>
			</div>
			<div  class="main-btn">
				<input type="submit">
			</div>
			<div class="close" onclick="code.close(this);"><i class="iconfont icon-close"></i></div>
		</div>
	</section>

	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/common.js"></script>
</body>
</html>